<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layouts/layout}">
<!-- BEGIN HEAD -->
<head>
    <title>邮件记录列表</title>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="page-header-fixed">
<th:block layout:fragment="content">
    <!-- BEGIN PAGE CONTAINER-->
    <div class="container-fluid">
        <!-- BEGIN PAGE HEADER-->
        <!-- END PAGE HEADER-->
        <!-- BEGIN PAGE CONTENT-->
        <div class="portlet-body form">
            <div class="row-fluid">
                <div class="span4">
                    <div class="control-group">
                        <label class="control-label span3" for="target">目标邮箱:</label>
                        <input type="text" id="target" name="target" class="m-wrap">
                    </div>
                </div>
                <!--<div class="span4">-->
                <!--<div class="control-group">-->
                <!--<label class="control-label span2" for="content">内容:</label>-->
                <!--<input type="text" id="content" name="content" class="m-wrap" placeholder="content">-->
                <!--</div>-->
                <!--</div>-->
                <div class="span4">
                    <div class="control-group">
                        <label class="control-label span2" for="status">状态:</label>
                        <select class="form-control" name='status' id='status'>
                            <option value="">请选择……</option>
                            <option value="0">未发送</option>
                            <option value="1">已发送</option>
                            <option value="-1">发送失败</option>
                            <option value="2">拒绝发送</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span9">
                    <div class="control-group">
                        <div class="controls">
                            <input type="button" class="btn btn-sm btn-info purple" onclick="search()" value="查询"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row-fluid">
            <!-- BEGIN SIDEBAR -->
            <div class="span12">
                <!-- BEGIN SAMPLE FORM PORTLET-->
                <div class="portlet">
                    <div class="portlet-body form">
                        <!-- BEGIN FORM-->
                        <table id="table"></table>
                    </div>
                </div>
                <!-- END SAMPLE FORM PORTLET-->
            </div>
        </div>
        <!-- END PAGE CONTENT-->
    </div>
    <!-- END PAGE CONTAINER-->
</th:block>
<th:block layout:fragment="content-js">
    <script type="text/javascript" th:src="@{/assets/js/dateConvert.js}"></script>
    <script th:inline="javascript">
        $(function () {
            initTable();
        });

        function initTable() {
            $("#table").bootstrapTable({
                dataType: "json",
                url: "/emailSend/listPage",
                method: 'post',//必选
                contentType: 'application/x-www-form-urlencoded; charset=UTF-8',//编码,必选
                sidePagination: "server", //表格分页的位置,必选
                pagination: true, //启动分页
                pageSize: 10, //每页显示的记录数
                pageNumber: 1, //当前第几页
                pageList: [10, 20, 30], //记录数可选列表
                striped: true,
                formatLoadingMessage: function () {
                    return "请稍等，正在加载中...";
                },
                formatNoMatches: function () {  //没有匹配的结果
                    return '无符合条件的记录';
                },
                queryParams: queryParams,
                columns: [
                    {
                        field: 'id',
                        title: '序号',
                        align: 'center'
                    },
                    {
                        field: 'target',
                        title: '目标邮箱',
                        align: 'center'
                    },
                    {
                        field: 'title',
                        title: '标题',
                        align: 'center'
                    },
                    {
                        field: 'content',
                        title: '内容',
                        align: 'center',
                        formatter: function (value, row, index) {
                            if (value != null && value != "") {
                                var html = "";
                                if (value.length > 20) {
                                    html = '<a href="#" style="text-decoration:none" title="' + value + '" >'
                                        + value.substr(0, 20) + '...</a>';
                                }
                                else {
                                    html = value;
                                }
                                return html;
                            }
                            return "";
                        }
                    },
                    {
                        field: 'status',
                        title: '状态',
                        align: 'center',
                        formatter: function (value,
                                             row, index) {
                            if (value == '0') {
                                return '未发送';
                            }
                            if (value == '1') {
                                return '已发送';
                            }
                            if (value == '-1') {
                                return '发送失败';
                            }
                            if (value == '2') {
                                return '拒绝发送';
                            }
                        }
                    },
                    {
                        field: 'failureCode',
                        title: '失败代码',
                        align: 'center',
                        formatter: function (value, row, index) {
                            if (value != null && value != "") {
                                var html = '<a href="#" style="text-decoration:none" title="' + row.failureReason + '" >' + value + '</a>';
                                return html;
                            }
                            return "";
                        }
                    },
                    {
                        field: 'createTime',
                        title: '创建时间',
                        align: 'center',
                        formatter: function (value, row, index) {
                            return changeDateFormat(value);
                        }
                    }
                ],
                responseHandler: function (res) {
                    if (res.code === '0000') {
                        return {total: res.data.total, rows: res.data.records}
                    } else {
                        bootbox.alert(res.msg);
                        return {};
                    }
                }
            })
        }

        // 查询条件
        function queryParams(params) {
            if ($('#target').val() != "") {
                params.target = $('#target').val();
            }
            if ($('#status').val() != "") {
                params.status = $('#status').val();
            }
            return params;
        }

        function search() {
            $('#table').bootstrapTable('refresh');
        }
    </script>

</th:block>
</body>
<!-- END BODY -->
</html>